<!DOCTYPE html>
<html lang="en">
<!--导入定义的变量-->
<#include "common/virs.ftl" />
<head>
    <meta charset="UTF-8">
    <title>留言板</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="hyblog,博客,杨德明,杨德明的个人博客,it,技术">
    <meta name="description" content="站长专注于java开发，高并发、高可用、分布式……">
    <link rel="shortcut icon" href="./static/pic/favicon.ico">
    <link rel="stylesheet" href="${layui_css}">
    <link rel="stylesheet" href="${main_css}">
    <!-- 字体 -->
    <link rel="stylesheet" href="${font_awesome_css}">
    <!--动画-->
    <link href="${animate_css}" rel="stylesheet">
    <style type="text/css">
    </style>
</head>
<body>
<!--整体容器-->
<div class="hy-blog">

    <!--导航条导入-->
    <#include "templates/nav.html" />
    <!-- 主体内容 -->
    <div class="layui-container">
        <div class="layui-row">
            <!--主体内容-->
            <div class="layui-col-xs12 animated fadeInLeft">
                <!--最外层warp-->
                <div class="msgbox">
                    <h2 style="margin: 20px; display: inline-block;">给我留言</h2>
                    <hr/>
                    <!--发表评论文本框-->
                    <div class="msgbox-comment-write">
                        <form class="layui-form" action="/comment/comment">
                            <div class="layui-form-item layui-form-text">
                                <textarea class="layui-textarea" name="commentContent" style="resize:none" placeholder="在遵守国家的法律法规的前提下，畅所欲言吧~"></textarea>
                            </div>
                            <div class="btnbox">
                                <div class="layui-input-inline">
                                    <input type="text" name="vericode" lay-verify="required" placeholder="请输入验证码" autocomplete="off" class="layui-input">
                                </div>

                                <img alt="验证码" src="/vericode" onclick = "this.src='/vericode?d='+new Date()*1" style="width: 115px;height: 38px;" />
                                <button class="layui-btn" id="sure" lay-submit="" lay-filter="doComment">
                                    确定
                                </button>
                            </div>
                        </form>
                    </div>
                    <!--评论展示区-->
                    <div class="msgbox-comment-area">
                        <h2 style="margin-bottom: 20px;">最新评论</h2>
                        <#list commentList as comment>
                            <div class="comment-item">
                                <div class="comment-info">
                                    <div class="layui-col-xs6 nickname"><span style="color: red;">#${comment.commentId}</span> ${comment.createTime?string('yyyy/MM/dd
                                        HH:mm:ss')}
                                    </div>
                                    <div class="layui-col-xs6 vote">
                                        <button style="border: none;background: none;" class="voteOneComment">
                                            <i class="layui-icon layui-icon-praise"></i><span class="votesNum">${comment.votes}</span>
                                            <div style="display: none;" class="commentId">${comment.commentId}</div>
                                        </button>
                                    </div>
                                </div>
                                <div class="comment-text">${comment.content}</div>
                            </div>
                        </#list>

                    </div>

                    <!--分页-->
                    <div style="text-align: center;"><div id="paging" style="display: inline;"></div></div>
                </div>
            </div>

        </div>
    </div>
    <!-- 主体内容end -->

    <!--导入footer-->
    <#include "templates/foot.html" />
</div>
<!--layui-->
<script src="${layui_js}"></script>
<script>
    layui.use(['element', 'laypage','jquery','layer','form'], function () {
        var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
        var laypage = layui.laypage;
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;

        //给【留言板】添加layui-this的样式
        $("#nav-message").addClass("layui-this");

        //监听导航点击
        element.on('nav(demo)', function (elem) {
            //console.log(elem)
            layer.msg(elem.text());
        });

        //执行一个laypage实例
        laypage.render({
            elem: 'paging' //注意，这里的 test1 是 ID，不用加 # 号
            ,curr : ${page}
            ,count: ${commentNums} //数据总数，从服务端得到
            ,jump: function(obj, first){
                //首次不执行
                if(!first){
                    // article/3/10   第三页，每页10条
                    window.location.href="/message?page="+obj.curr+"&limit="+obj.limit;
                }
            }
        });
        //监听提交
        form.on('submit(doComment)', function (data) {
            var subDat = data.field;
            //异步请求提交
            $.ajax({
                url: "/comment/comment",
                type: "POST",
                data: subDat,//【注意】这里的这个对象就只能套一层，如果套了多层，就会出现很奇怪的问题。
                async: false,
                error: function (data) {
                    layer.alert("出错了！服务器故障或本地网络错误。");
                },
                success: function (data) {
                    data = JSON.parse(data)
                    if (data.code == 0) {
                        layer.alert(data.msg);
                        //在DOM中插入评论
                        //计算最后一页
                        var p = Math.floor(${commentNums}/10);
                        if (${commentNums}%10 != 0)
                            p=p+1;
                        window.location.href="/message?page="+p;
                    } else if (data.code == 1) {
                        layer.alert(data.msg);
                    }
                }
            });
            return false;
        });

        //给评论点赞绑定事件
        $(".voteOneComment").click(function () {
            //获取当前点击条目的id
            var commentId = $(this).find(".commentId").text();
            //当前条目
            var btn = $(this);
            var d = {"commentId":commentId};
            $.ajax({
                url: "/comment/vote",
                type: "POST",
                data: d,//【注意】这里的这个对象就只能套一层，如果套了多层，就会出现很奇怪的问题。
                async: false,
                error: function (data) {
                    layer.alert("出错了！服务器故障或本地网络错误。");
                },
                success: function (data) {
                    data = JSON.parse(data)
                    //console.log(data.msg)
                    if (data.code == 0) {
                        layer.msg(data.msg);
                        //禁止按钮
                        btn.attr('disabled',"true");
                        //获取当前点击条目的点赞数
                        var votesNum = parseInt(btn.find(".votesNum").text());
                        //点赞加一
                        btn.find(".votesNum").text(votesNum+1);
                    } else if (data.code == 1) {
                        layer.msg(data.msg);
                    }
                }
            });
        });
    });
</script>
</body>
</html>